<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<a href="index.html">返回</a>
<div class="app">
    <h2>列表循环和过滤</h2>
    <ul>
        <li style="list-style: none" v-for="(stu,index) in stus" :key="index">
            [{{index}}]： {{ stu.name }}-- {{ stu.age }}
        </li>
    </ul>
    <hr>
    关键字：<input type="text" v-model:value="keyword">
<!--    <ul>-->
<!--        <li style="list-style: none" v-for="(stu ,index) in filstus" :key="index">-->
<!--            [{{index}}]： {{ stu.name }}&#45;&#45; {{ stu.age }}-->
<!--        </li>-->
<!--    </ul>-->
    <a @click="sortType=1">升序</a>  <a  @click="sortType=2">降序</a>   <a @click="sortType=0" >原序</a>
    <ul>
        <li style="list-style: none" v-for="(stu,index) in comstus" :key="index">
            [{{index}}]： {{ stu.name }}-- {{ stu.age }}
        </li>
    </ul>
</div>
<script>
    Vue.config.productionTip=false  //关闭生产状态提示
    const x=new Vue({
        // el:".app",
        data:function (){  //data的第二种写法
            return{
                keyword:'',
                sortType:1,//0升序，1降序，2 原来
                stus:[
                    {
                        name:'张三',age:23
                    },
                    {
                        name:'李四',age:28},
                    {
                        name:'王五',age:11},
                    {
                        name:'赵六',age:31}
                ],
                filstus:[]
            }
        },
        computed:{
            comstus(){
                const arr =this.stus.filter((p)=>{
                    return p.name.indexOf(this.keyword)!== -1
                })
                if(this.sortType){
                    arr.sort((a,b)=>{
                        return this.sortType===1 ? a.age-b.age :b.age-a.age
                    })
                }
                return arr
            }
        },
        watch:{
            //刚出来没东西，所以改一下
            // keyword(value){
            //     this.filstus =this.stus.filter((p)=>{
            //         return p.name.indexOf(value) !== -1
            //     })
            // }

            // keyword:{
            //     immediate:true,
            //     handler(value){
            //         this.filstus =this.stus.filter((p)=>{
            //             return p.name.indexOf(value) !== -1
            //         })
            //     }
            // }
        }
    })
        x.$mount(".app")//挂载方式
</script>
</body>
</html>